<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<link rel="stylesheet" href="/static/index/css/bootstrap.min.css"/>-->
    <!--tp中加载css  load和css标签都可以-->
    {load href="/static/index/css/bootstrap.min.css"}
    {load href="/static/index/css/toastr.min.css"}
    {css href="/static/index/reset.css"}
    <title>{$title}</title>
</head>
<body>
    <div class="container">
        <div class="col-md-12 bg-primary p20">
            <h1>{$title}</h1>
            <hr>
            <a href="{:url('rest/user/index')}" class="btn btn-default">用户列表页</a>
            <a href="{:url('rest/user/create')}" class="btn btn-default">添加用户</a>
        </div>

        <div class="clearfix"></div>
        {block name='main'}
        <div class="row mt50">
            <div class="col-md-6">
                <table class="table bg-info table-hover">
                    <tr>
                        <td>ID</td>
                        <td>NAME</td>
                        <td class="col-md-6">ACTION</td>
                    </tr>
                    {volist name='list' id='v' mod='2'}
                    {eq name='mod' value='0'}
                    <tr>
                        <td>{$v['id']}</td>
                        <td>{$v['name']}</td>
                        <td>
                            <button data-id="{$v['id']}" data-target="#myModal" data-toggle="modal" class="show-btn btn btn-default btn-xs">信息</button>
                            <a href="{:url('rest/user/readpage',['id'=>$v['id']])}" class="btn btn-default btn-xs">查看信息</a>
                            <a href="{:url('rest/user/edit',['id'=>$v['id']])}" class="btn btn-primary btn-xs">编辑</a>
                            <button data-id="{$v['id']}" class="del-btn btn btn-danger btn-xs">删除</button>
                        </td>
                    </tr>
                    {/eq}
                    {/volist}
                </table>
            </div>
            <div class="col-md-6">
                <table class="table bg-info table-hover">
                    <tr>
                        <td>ID</td>
                        <td>NAME</td>
                        <td class="col-md-6">ACTION</td>
                    </tr>
                    {volist name='list' id='v' mod='2'}
                    {eq name='mod' value='1'}
                    <tr>
                        <td>{$v['id']}</td>
                        <td>{$v['name']}</td>
                        <td>
                            <button data-id="{$v['id']}" data-target="#myModal" data-toggle="modal" class="show-btn btn btn-default btn-xs">信息</button>
                            <a href="{:url('rest/user/readpage',['id'=>$v['id']])}" class="btn btn-default btn-xs">查看信息</a>
                            <a href="{:url('rest/user/edit',['id'=>$v['id']])}" class="btn btn-primary btn-xs">编辑</a>
                            <button data-id="{$v['id']}" class="del-btn btn btn-danger btn-xs">删除</button>
                        </td>
                    </tr>
                    {/eq}
                    {/volist}
                </table>
            </div>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">
                            用户 [ <u></u> ] 的详细信息 </h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-3">
                                <img src="/static/index/face/2.jpg" width="100">
                            </div>
                            <div class="col-md-9">
                                <h3></h3>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-info" data-dismiss="modal">关闭</button>

                    </div>
                </div>
            </div>
        </div> <!--END motal-->
        {/block}
    </div>


{js href="/static/index/js/jquery.min.js"}
{js href="/static/index/js/bootstrap.min.js"}
{js href="/static/index/js/toastr.min.js"}

{block name='myjs'}
    <script>
        $(function(){
//          触发用户的删除操作
            $('.del-btn').click(function(){
               var ac_id = $(this).attr('data-id');

               if (confirm('您确定要 [ 删除 ] 该用户么?')){
//                   找到id所在的父级
                   var obj = $(this).parents('tr');
                   console.log(ac_id,obj);
                   delAjax(ac_id,obj);
               }
            });

            //触发用户查看操作
            $('.show-btn').click(function(){
                var ac_id = $(this).attr('data-id');
                showAjax(ac_id);
            });
        });


        // 设置弹框参数
        toastr.options = {
            closeButton: true,//是否显示关闭按钮
            progressBar: true,//实现显示计时条
            timeOut: "3000",//自动关闭时间
            positionClass: "toast-bottom-left"//提示位置
            // toast-top-full-width 顶端，宽度铺满整个屏幕
            // toast-top-right  顶端右边
        };

//        执行删除的函数
        function delAjax(id,obj){
            $.ajax({
                type:'delete',
                url:'/users/'+ id,
                dataType:'json',
                success:function(data){
                    if(data.status){
//                        console.log('删除成功');
                        toastr.success(data.info);
//                        成功则删除当前节点
                        obj.remove();
                    }else{
                        toastr.error(data.info,'FBI WARNING:')
                    }
                },
                error:function(){
                    alert('AJAX请求失败');
                }
            })
        }

        //执行查看的函数
        function showAjax(id,obj){
            $.ajax({
                type:'get',
                url:'/users/'+ id,
                dataType:'json',
                success:function(data){
                    console.log(123);
                    if(data.status){
//                        把数据遍历到模态框中
                        var x=data.datas['name'];
                        var y=data.datas['age'];
                        var z=data.datas['province'];
                        $('.modal-title u').html(data.title);
                        $('.modal-body h3').html('姓名:'+x+'　年龄:'+y+'　来自:'+z);


                    }else{
                        $('.modal-title u').html('data.title');
                        $('.modal-body h3').html('data.datas');
                    }
                },
                error:function(){
                    alert('AJAX请求失败');
                }
            })
        }
    </script>
{/block}
</body>
</html>
